<template>
  <div class="app-container">
    <el-divider>金额获取</el-divider>
    <el-form ref="form" :model="formData" label-width="120px">
      <el-form-item label="快速收银">
        <el-switch v-model="formData.quilck"></el-switch>
        <span class="tip-text">(选项说明:扫支付码后直接发起支付)</span>
      </el-form-item>

      <el-form-item label="自动获取金额">
        <el-switch v-model="formData.autoGetAmount"></el-switch>
      </el-form-item>

      <el-form-item label="金额获取方式">
        <el-select
          v-model="formData.getAmountType"
          placeholder="请选择金额获取方式"
        >
          <el-option label="请选择金额获取方式" :value="0"></el-option>
          <el-option label="窗口读取" :value="1"></el-option>
          <el-option label="客显读取" :value="2"></el-option>
          <el-option label="虚拟串口" :value="3"></el-option>
          <el-option label="金额搜索" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-divider>清台设置</el-divider>

      <el-form-item label="支付成功后自动执行" label-width="100">
        <el-switch v-model="formData.autoExecution"></el-switch>
      </el-form-item>

      <div class="autoExecution" v-if="formData.autoExecution">
        <div class="item">
          <!-- <span class="label">微信</span> -->
          <el-button
            class="value"
            size="mini"
            type="primary"
            @click="site()"
            >设置按键</el-button
          >
        </div>
        <!-- <div class="item">
          <span class="label">支付宝</span>
          <el-button
            class="value"
            size="mini"
            type="primary"
            @click="site('zfb')"
            >设置</el-button
          >
        </div>
        <div class="item">
          <span class="label">云闪付</span>
          <el-button
            class="value"
            size="mini"
            type="primary"
            @click="site('ysf')"
            >设置</el-button
          >
        </div> -->
        <el-form-item label="按键时间间隔">
          <el-input-number
            v-model="formData.time"
            :min="1"
            :max="1000"
            label="打印收款张数"
          ></el-input-number>
          <span>毫秒</span>
        </el-form-item>
      </div>
      <el-divider>打印设置</el-divider>
      <el-form-item label="打印机选择">
        <el-select v-model="formData.printerType" placeholder="请选择设备类型">
          <el-option label="请选择设备类型" :value="0"></el-option>
          <el-option label="关闭打印" :value="1"></el-option>
          <el-option label="驱动打印" :value="2"></el-option>
          <el-option label="串口打印" :value="3"></el-option>
          <el-option label="并口打印" :value="4"></el-option>
          <el-option label="网络打印" :value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="并口选择" v-if="formData.printerType == 4">
        <el-select v-model="formData.parallelport" placeholder="请选择并口类型">
          <el-option label="请选择并口类型" :value="0"></el-option>
          <el-option label="lpt1" :value="1"></el-option>
          <el-option label="lpt2" :value="2"></el-option>
          <el-option label="lpt3" :value="3"></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="打印选项">
        <el-radio-group v-model="formData.resource">
          <el-radio :label="1">打印班结汇总</el-radio>
          <el-radio :label="2">打印班结汇总</el-radio>
          <el-radio :label="3">打印支付凭证</el-radio>
          <el-radio :label="4">打印退款凭证</el-radio>
        </el-radio-group>
      </el-form-item> -->

      <!--      <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>-->

      <!-- <el-form-item label="打印收款张数">
        <el-input-number
          v-model="formData.collNum"
          :min="1"
          :max="10"
          label="打印收款张数"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="退款打印张数">
        <el-input-number
          v-model="formData.tuiNum"
          :min="1"
          :max="10"
          label="退款打印张数"
        ></el-input-number>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="resetting">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 设置弹框按键 -->
    <el-dialog title="按键设置" :visible.sync="dialogFormVisible">
      <div class="table">
        <div class="tr">
          <div class="td">
            <input type="text" @keydown="savekey($event,1)" v-model="ipt" />
          </div>
          <div class="td">
            <input type="text" @keydown="savekey($event,2)" v-model="ipt1" />
          </div>
          <div class="td">
            <input type="text" @keydown="savekey($event,3)" v-model="ipt2"/>
          </div>
        </div>
        <div class="tr">
          <div class="td">
            <input type="text" @keydown="savekey($event,4)" v-model="ipt3"/>
          </div>
          <div class="td">
            <input type="text" @keydown="savekey($event,5)" v-model="ipt4"/>
          </div>
          <div class="td">
            <input type="text" @keydown="savekey($event,6)" v-model="ipt5"/>
          </div>
        </div>
        <div class="tr">
          <div class="td">
            <input type="text" @keydown="savekey($event,7)" v-model="ipt6"/>
          </div>
          <div class="td">
            <input type="text" @keydown="savekey($event,8)" v-model="ipt7"/>
          </div>
          <div class="td">
            <input type="text" @keydown="savekey($event,9)" v-model="ipt8"/>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resettingKey">重置</el-button>
        <el-button type="primary" @click="btnkey"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Message } from "element-ui";

const form = ref();
let formData = ref({
  quilck: false,
  resource: 0,
  getAmountType: 0,
  printerType: 0,
  time: 100,
  collNum: 1,
  tuiNum: 1,
  keysData:'',
  parallelport:0
});

let ipt = ref('')
let ipt1 = ref('')
let ipt2 = ref('')
let ipt3 = ref('')
let ipt4 = ref('')
let ipt5 = ref('')
let ipt6 = ref('')
let ipt7 = ref('')
let ipt8 = ref('')
let keyData = []
const resdata = ref([])
const dialogFormVisible = ref(false);
onMounted(() => {
  //获取配置
  if (JSON.parse(localStorage.getItem("cashierSetup")) != null) {
    let cashierSetup = JSON.parse(localStorage.getItem("cashierSetup"));
    formData.value = cashierSetup
    if (cashierSetup.keysData) {
      resdata.value = JSON.parse(cashierSetup.keysData)
      console.log(resdata.value);
    }
  }
});
//保存
const onSubmit = () => {
  localStorage.setItem("cashierSetup", JSON.stringify(formData.value));
  Message({
    message: "保存成功!",
    type: "success",
  });

  setTimeout(() => {
    location.reload();
  },500)
  
};
//重置
const resetting = () => {
  formData.value = {
    quilck: false,
    resource: 0,
    getAmountType: 0,
    printerType: 0,
    time: 100,
    collNum: 1,
    tuiNum: 1,
    parallelport:0
  };
  Message({
    message: "重置成功!",
    type: "success",
  });
};
const site = () => {
  ipt.value = ''
  ipt1.value = ''
  ipt2.value = ''
  ipt3.value = ''
  ipt4.value = ''
  ipt5.value = ''
  ipt6.value = ''
  ipt7.value = ''
  ipt8.value = ''
  if (resdata.value) {
    resdata.value.forEach(item => {
      if (item.key == 'ipt') {
        ipt.value = item.value.codetext
      }
      if (item.key == 'ipt1') {
        ipt1.value = item.value.codetext
      }
      if (item.key == 'ipt2') {
        ipt2.value = item.value.codetext
      }      
      if (item.key == 'ipt3') {
        ipt3.value = item.value.codetext
      }
      if (item.key == 'ipt4') {
        ipt4.value = item.value.codetext
      }
      if (item.key == 'ipt5') {
        ipt5.value = item.value.codetext
      }
      if (item.key == 'ipt6') {
        ipt6.value = item.value.codetext
      }
      if (item.key == 'ipt7') {
        ipt7.value = item.value.codetext
      }
      if (item.key == 'ipt8') {
        ipt8.value = item.value.codetext
      }
    })
  }
  dialogFormVisible.value = true;
};
const savekey = (event, type) => {
  console.log(event);
  if (type == 1) {
    ipt.value = event.code
    keyData.push({key:'ipt', value:{codetext:event.code,code:event.keyCode}})
  }
  if (type == 2) {
    ipt1.value = event.code
    keyData.push({key:'ipt1', value:{codetext:event.code,code:event.keyCode}})
  }
  if (type == 3) {
    ipt2.value = event.code
    keyData.push({key:'ipt2', value:{codetext:event.code,code:event.keyCode}})
  }
  if (type == 4) {
    ipt3.value = event.code
    keyData.push({key:'ipt3', value:{codetext:event.code,code:event.keyCode}})
  }
  if (type == 5) {
    ipt4.value = event.code
    keyData.push({key:'ipt4', value:{codetext:event.code,code:event.keyCode}})
  }
  if (type == 6) {
    ipt5.value = event.code
    keyData.push({key:'ipt5', value:{codetext:event.code,code:event.keyCode}})
  }
  if (type == 7) {
    ipt6.value = event.code
    keyData.push({key:'ipt6', value:{codetext:event.code,code:event.keyCode}})
  }
  if (type == 8) {
    ipt7.value = event.code
    keyData.push({key:'ipt7', value:{codetext:event.code,code:event.keyCode}})
  }
  if (type == 9) {
    ipt8.value = event.code
    keyData.push({key:'ipt8', value:{codetext:event.code,code:event.keyCode}})
  }
}
const btnkey = () => {
  // if (keyData.value.length > 0) {
  //   keyData.value = keyData.value.filter(item => {
  //     console.log(item);
  //   })
  // }
  if (formData.value.keysData) {
    let json = JSON.parse(formData.value.keysData)
    keyData.forEach(item => {
      json.push(item)
    })
    formData.value.keysData = JSON.stringify(json)
  } else {
    formData.value.keysData = JSON.stringify(keyData)
  }
  dialogFormVisible.value = false
}

const resettingKey = () => {
  ipt.value = ''
  ipt1.value = ''
  ipt2.value = ''
  ipt3.value = ''
  ipt4.value = ''
  ipt5.value = ''
  ipt6.value = ''
  ipt7.value = ''
  ipt8.value = ''
  formData.value.keysData = ''
}
</script>

<style lang="scss" scoped>
.app-container {
  .tip-text {
    color: red;
  }
  .autoExecution {
    .item {
      margin-bottom: 30px;
      font-size: 14px;
      color: #606266;
      .label {
        display: inline-block;
        width: 50px;
      }
      .value {
        // margin-left: 300px;/
      }
    }
  }
  .table {
    border-top: 1px solid #606266;
    border-left: 1px solid #606266;
    .tr {
      display: flex;
      height: 50px;
      border-bottom: 1px solid #606266;
      .td {
        width: 33.33%;
        height: 50px;
        border-right: 1px solid #606266;
        input {
          text-align: center;
          border: unset;
          width: 100%;
          height: 45px;
          outline: none;
          font-size: 20px;
        }
      }
    }
  }
}
</style>

